<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>控制面板展示 - 御物联</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root{
            --primary:#409EFF;
            --stage-bg:#EDE3D3; /* 全屏舞台背景（如截图外层米色） */
            --bg:#F5F7FA;      /* 页面内部背景（卡片外层浅灰） */
            --text:#303133;
            --subtext:#909399;
            --card:#FFFFFF;
            --border:#EBEEF5;
            --ok:#67C23A;
            --warn:#E6A23C;
            --danger:#F56C6C;
        }
        body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:var(--stage-bg); color:var(--text); }

        /* 页面容器，限制移动端阅读宽度并居中 */
        .page{ min-height:100vh; padding-bottom:calc(72px + env(safe-area-inset-bottom)); max-width:480px; margin:0 auto; background:var(--bg); }

        /* 页头样式 */
        .header-box{ position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--border); box-shadow:0 -2px 8px rgba(0,0,0,.04); padding:12px; display:flex; justify-content:space-between; align-items:center; margin:0; border-radius:0; }
        .back-btn{ display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-size:14px; }
        .back-btn:hover{ color:var(--primary); }
        .back-icon{ font-size:18px; }
        .user{ padding:0 10px; height:32px; border-radius:16px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; gap:8px; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.03); }
        .user-avatar{ width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }

        /* 页面标题 */
        .page-title{ padding:20px 16px; text-align:center; font-size:24px; font-weight:600; color:var(--primary); }

        /* 控制类型网格 */
        .control-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 16px 20px; }
        .control-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.03); cursor:pointer; transition:all 0.3s ease; }
        .control-card:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
        .control-icon{ font-size:32px; margin-bottom:12px; }
        .control-name{ font-size:16px; font-weight:600; color:var(--text); margin-bottom:8px; }
        .control-desc{ font-size:12px; color:var(--subtext); }

        /* 弹框遮罩 */
        .modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:999; }
        .modal-mask.open{ opacity:1; pointer-events:auto; }

        /* 弹框容器 */
        .modal-dialog{ position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.9); background:var(--card); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15); transition:transform .25s ease; z-index:1000; min-width:320px; max-width:400px; width:90vw; }
        .modal-mask.open .modal-dialog{ transform:translate(-50%, -50%) scale(1); }

        /* 弹框头部 */
        .modal-header{ padding:20px 20px 0; display:flex; align-items:center; justify-content:space-between; }
        .modal-title{ font-size:18px; font-weight:600; color:var(--text); }
        .modal-close{ width:24px; height:24px; border:none; background:none; font-size:20px; color:var(--subtext); cursor:pointer; }

        /* 弹框内容 */
        .modal-body{ padding:20px; }
        .modal-footer{ padding:0 20px 20px; display:flex; gap:12px; }

        /* 按钮样式 */
        .btn{ height:40px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); font-size:14px; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; }
        .btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
        .btn-success{ background:var(--ok); color:#fff; border-color:var(--ok); }
        .btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
        .btn:hover{ opacity:0.8; }
        .btn:disabled{ opacity:0.5; cursor:not-allowed; }

        /* 开关类样式 */
        .switch-controls{ display:flex; gap:16px; justify-content:center; margin:20px 0; }
        .switch-btn{ flex:1; height:50px; border-radius:8px; font-size:16px; font-weight:600; }

        /* 空调类样式 */
        .aircon-controls{ margin:20px 0; }
        .aircon-power{ display:flex; gap:16px; justify-content:center; margin-bottom:20px; }
        .aircon-power .btn{ flex:1; height:50px; font-size:16px; font-weight:600; }
        .aircon-temp{ text-align:center; }
        .temp-label{ font-size:14px; color:var(--subtext); margin-bottom:12px; }
        .temp-controls{ display:flex; align-items:center; gap:16px; justify-content:center; }
        .temp-btn{ width:40px; height:40px; border-radius:50%; font-size:20px; font-weight:bold; }
        .temp-display{ font-size:24px; font-weight:600; color:var(--primary); min-width:60px; }
        .temp-mode{ margin-top:16px; }
        .mode-buttons{ display:flex; gap:8px; justify-content:center; }
        .mode-btn{ padding:8px 16px; border-radius:20px; font-size:14px; }

        /* 进度条样式 */
        .progress-control{ margin:20px 0; }
        .progress-label{ font-size:14px; color:var(--subtext); margin-bottom:12px; text-align:center; }
        .progress-container{ position:relative; height:8px; background:var(--border); border-radius:4px; margin:20px 0; }
        .progress-bar{ height:100%; background:var(--primary); border-radius:4px; transition:width 0.3s ease; }
        .progress-handle{ position:absolute; top:50%; transform:translateY(-50%); width:20px; height:20px; background:var(--primary); border:3px solid #fff; border-radius:50%; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); }
        .progress-value{ text-align:center; font-size:18px; font-weight:600; color:var(--primary); margin-top:12px; }

        /* 开关样式 */
        .toggle-switch-large{ position:relative; width:90px; height:48px; }
        .toggle-switch-track{ width:100%; height:100%; background:#67C23A; border-radius:24px; position:relative; cursor:pointer; transition:background 0.3s; box-shadow:inset 0 2px 4px rgba(0,0,0,.1); }
        .toggle-switch-track.off{ background:#dcdfe6; }
        .toggle-switch-handle{ position:absolute; top:4px; left:4px; width:40px; height:40px; background:#fff; border-radius:50%; transition:transform 0.3s ease; box-shadow:0 2px 6px rgba(0,0,0,.2); }
        .toggle-switch-track.off .toggle-switch-handle{ transform:translateX(0); }
        .toggle-switch-track.on .toggle-switch-handle{ transform:translateX(42px); }

        /* 抽屉复用 */
        .drawer-mask{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:999; }
        .drawer-mask.open{ opacity:1; pointer-events:auto; }
        .drawer{ position:fixed; top:0; right:0; height:100vh; width:86vw; max-width:420px; background:var(--card); border-left:1px solid var(--border); box-shadow:-12px 0 24px rgba(0,0,0,.12); transform:translateX(100%); transition:transform .25s ease; z-index:1000; display:flex; flex-direction:column; }
        .drawer.open{ transform:translateX(0); }
        .drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); font-weight:600; }
        .drawer-body{ padding:0 14px 14px; color:var(--subtext); font-size:14px; overflow:auto; }
        .drawer-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); color:var(--text); }
        .drawer-row:last-child{ border-bottom:none; }
        .drawer-foot{ display:flex; gap:10px; padding:12px; background:var(--bg); border-top:1px solid var(--border); }
    </style>
</head>
<body>
    <div class="page">
        <!-- 页头 -->
        <div class="header-box">
            <a href="device-detail.html" class="back-btn">
                <span class="back-icon">←</span>
                <span>返回设备详情</span>
            </a>
            <button class="user" id="userBtn" type="button" title="查看个人信息">
                <span class="user-avatar" id="userAvatar">U</span>
                <span id="userName">用户</span>
            </button>
        </div>

        <!-- 页面标题 -->
        <div class="page-title">控制面板展示</div>

        <!-- 控制类型网格 -->
        <div class="control-grid">
            <div class="control-card" onclick="openSwitchModal()">
                <div class="control-icon">🔘</div>
                <div class="control-name">开关类</div>
                <div class="control-desc">点击打开/关闭控制</div>
            </div>
            <div class="control-card" onclick="openSwitchToggleModal()">
                <div class="control-icon">🔀</div>
                <div class="control-name">开关切换</div>
                <div class="control-desc">单项开关选择器</div>
            </div>
            <div class="control-card" onclick="openAirconModal()">
                <div class="control-icon">❄️</div>
                <div class="control-name">空调类</div>
                <div class="control-desc">红外遥控器控制面板</div>
            </div>
            <div class="control-card" onclick="openBrightnessModal()">
                <div class="control-icon">💡</div>
                <div class="control-name">亮度类</div>
                <div class="control-desc">亮度百分比控制</div>
            </div>
            <div class="control-card" onclick="openOpeningModal()">
                <div class="control-icon">📏</div>
                <div class="control-name">开度类</div>
                <div class="control-desc">开度百分比控制</div>
            </div>
        </div>
    </div>

    <!-- 个人信息抽屉 -->
    <div class="drawer-mask" id="drawerMask"></div>
    <aside class="drawer" id="userDrawer" aria-label="个人信息">
        <div class="drawer-header">
            <span>个人信息</span>
        </div>
        <div class="drawer-body">
            <div class="drawer-row"><span>账号</span><span id="infoAccount">-</span></div>
            <div class="drawer-row"><span>角色</span><span id="infoRole">-</span></div>
            <div class="drawer-row"><span>手机号码</span><span id="infoPhone">-</span></div>
        </div>
        <div class="drawer-foot">
            <button id="logoutBtn" class="btn-danger" style="flex:1;">退出登录</button>
            <button id="closePanel" class="btn" style="flex:1;">关闭</button>
        </div>
    </aside>

    <!-- 开关类弹框（按钮式） -->
    <div class="modal-mask" id="switchModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">开关控制</div>
                <button class="modal-close" onclick="closeModal('switchModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="switch-controls">
                    <button class="btn btn-success switch-btn" onclick="setSwitchState('on')">打开</button>
                    <button class="btn btn-danger switch-btn" onclick="setSwitchState('off')">关闭</button>
                </div>
                <div style="text-align:center; margin-top:20px;">
                    <div id="switchStatus" style="font-size:16px; color:var(--subtext);">当前状态：未选择</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('switchModal')" style="flex:1;">取消</button>
                <button class="btn btn-primary" onclick="confirmSwitch()" style="flex:1;">保存</button>
            </div>
        </div>
    </div>

    <!-- 开关切换弹框（Switch式） -->
    <div class="modal-mask" id="switchToggleModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">开关切换</div>
                <button class="modal-close" onclick="closeModal('switchToggleModal')">×</button>
            </div>
            <div class="modal-body" style="padding:60px 20px;">
                <div style="display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px;">
                    <div class="toggle-switch-large">
                        <div class="toggle-switch-track on" id="switchToggle" onclick="toggleSwitchState()">
                            <div class="toggle-switch-handle"></div>
                        </div>
                    </div>
                    <div id="switchToggleStatus" style="font-size:16px; color:var(--text); font-weight:500;">当前状态：开启</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('switchToggleModal')" style="flex:1;">关闭</button>
            </div>
        </div>
    </div>

    <!-- 空调类弹框 -->
    <div class="modal-mask" id="airconModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">红外遥控器控制面板</div>
                <button class="modal-close" onclick="closeModal('airconModal')">×</button>
            </div>
            <div class="modal-body">
                <div style="text-align:center; color:var(--subtext); font-size:12px; margin-bottom:12px; padding:8px; background:rgba(255,193,7,.1); border-radius:6px;">
                    ⚠️ 注意：不能获取实时控制数据
                </div>
                <div class="aircon-controls">
                    <div class="aircon-power">
                        <button class="btn btn-success" onclick="setAirconPower('on')">打开空调</button>
                        <button class="btn btn-danger" onclick="setAirconPower('off')">关闭空调</button>
                    </div>
                    <div class="aircon-temp">
                        <div class="temp-label">温度调节</div>
                        <div class="temp-controls">
                            <button class="btn temp-btn" onclick="changeTemp(-1)">-</button>
                            <div class="temp-display" id="tempDisplay">25°C</div>
                            <button class="btn temp-btn" onclick="changeTemp(1)">+</button>
                        </div>
                        <div class="temp-mode">
                            <div class="mode-buttons">
                                <button class="btn mode-btn" onclick="setTempMode('cool')" id="coolBtn">制冷</button>
                                <button class="btn mode-btn" onclick="setTempMode('heat')" id="heatBtn">制热</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('airconModal')" style="flex:1;">取消</button>
                <button class="btn btn-primary" onclick="confirmAircon()" style="flex:1;">保存</button>
            </div>
        </div>
    </div>

    <!-- 亮度类弹框 -->
    <div class="modal-mask" id="brightnessModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">亮度控制</div>
                <button class="modal-close" onclick="closeModal('brightnessModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="progress-control">
                    <div class="progress-label">亮度调节</div>
                    <div class="progress-container" id="brightnessContainer">
                        <div class="progress-bar" id="brightnessBar" style="width: 50%;"></div>
                        <div class="progress-handle" id="brightnessHandle" style="left: 50%;"></div>
                    </div>
                    <div class="progress-value" id="brightnessValue">50%</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('brightnessModal')" style="flex:1;">关闭</button>
            </div>
        </div>
    </div>

    <!-- 开度类弹框 -->
    <div class="modal-mask" id="openingModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">开度控制</div>
                <button class="modal-close" onclick="closeModal('openingModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="progress-control">
                    <div class="progress-label">开度调节</div>
                    <div class="progress-container" id="openingContainer">
                        <div class="progress-bar" id="openingBar" style="width: 0%;"></div>
                        <div class="progress-handle" id="openingHandle" style="left: 0%;"></div>
                    </div>
                    <div class="progress-value" id="openingValue">0%</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('openingModal')" style="flex:1;">关闭</button>
            </div>
        </div>
    </div>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化用户信息显示
            (function initUser(){
                try {
                    const userStr = localStorage.getItem('currentUser');
                    const user = userStr ? JSON.parse(userStr) : null;
                    const nameEl = document.getElementById('userName');
                    const avatarEl = document.getElementById('userAvatar');
                    if(user && nameEl && avatarEl){
                        nameEl.textContent = user.name || '用户';
                        avatarEl.textContent = (user.name || 'U').slice(0,1);
                        // 填充弹窗信息
                        const accountEl = document.getElementById('infoAccount');
                        const roleEl = document.getElementById('infoRole');
                        const phoneEl = document.getElementById('infoPhone');
                        if(accountEl) accountEl.textContent = user.account || '-';
                        if(roleEl) roleEl.textContent = user.role || '-';
                        if(phoneEl) phoneEl.textContent = user.phone || '-';
                    }
                } catch(e){
                    console.error('初始化用户信息时出错:', e);
                }
            })();

            // 右侧抽屉交互
            const drawer = document.getElementById('userDrawer');
            const mask = document.getElementById('drawerMask');
            const userBtn = document.getElementById('userBtn');
            const closePanel = document.getElementById('closePanel');
            const logoutBtn = document.getElementById('logoutBtn');
            
            if (!drawer || !mask || !userBtn || !closePanel || !logoutBtn) {
                console.error('缺少必要的DOM元素');
                return;
            }
            
            function openDrawer(){ drawer.classList.add('open'); mask.classList.add('open'); }
            function closeDrawer(){ drawer.classList.remove('open'); mask.classList.remove('open'); }
            
            userBtn.addEventListener('click', openDrawer);
            closePanel.addEventListener('click', closeDrawer);
            mask.addEventListener('click', closeDrawer);
            logoutBtn.addEventListener('click', () => {
                localStorage.removeItem('currentUser');
                window.location.href = 'mobile-login-demo.html';
            });
            
            // Esc 关闭
            document.addEventListener('keydown', (e)=>{ if(e.key==='Escape') closeDrawer(); });
        });

        // 全局变量存储控制状态
        let switchState = null;
        let airconState = { power: 'off', temp: 25, mode: 'cool' };
        let brightnessValue = 50;
        let openingValue = 0;

        // 弹框控制函数
        function openModal(modalId) {
            document.getElementById(modalId).classList.add('open');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('open');
        }

        // 开关类控制（按钮式）
        function openSwitchModal() {
            // 重置状态
            switchState = null;
            const statusEl = document.getElementById('switchStatus');
            if(statusEl){
                statusEl.textContent = '当前状态：未选择';
                statusEl.style.color = 'var(--subtext)';
            }
            openModal('switchModal');
        }

        function setSwitchState(state) {
            switchState = state;
            const statusEl = document.getElementById('switchStatus');
            if(statusEl){
                statusEl.textContent = `当前状态：${state === 'on' ? '打开' : '关闭'}`;
                statusEl.style.color = state === 'on' ? 'var(--ok)' : 'var(--danger)';
            }
        }

        function confirmSwitch() {
            if (switchState) {
                alert(`开关控制已保存：${switchState === 'on' ? '打开' : '关闭'}`);
                closeModal('switchModal');
            } else {
                alert('请先选择开关状态！');
            }
        }

        // 开关切换控制（Switch式）
        function openSwitchToggleModal() {
            // 确保开关默认是开启状态
            const toggleSwitch = document.getElementById('switchToggle');
            const statusEl = document.getElementById('switchToggleStatus');
            if(toggleSwitch){
                toggleSwitch.classList.remove('off');
                toggleSwitch.classList.add('on');
            }
            if(statusEl){
                statusEl.textContent = '当前状态：开启';
            }
            openModal('switchToggleModal');
        }

        // 切换开关状态
        function toggleSwitchState() {
            const toggleSwitch = document.getElementById('switchToggle');
            const statusEl = document.getElementById('switchToggleStatus');
            if(!toggleSwitch) return;
            
            const isOn = toggleSwitch.classList.contains('on');
            
            if(isOn){
                toggleSwitch.classList.remove('on');
                toggleSwitch.classList.add('off');
                if(statusEl){
                    statusEl.textContent = '当前状态：关闭';
                    statusEl.style.color = 'var(--subtext)';
                }
            } else {
                toggleSwitch.classList.remove('off');
                toggleSwitch.classList.add('on');
                if(statusEl){
                    statusEl.textContent = '当前状态：开启';
                    statusEl.style.color = 'var(--text)';
                }
            }
            
            alert('命令已经发出');
        }

        // 空调类控制
        function openAirconModal() {
            // 重置空调状态为默认值
            airconState = { power: 'off', temp: 25, mode: 'cool' };
            
            // 更新UI显示
            document.getElementById('tempDisplay').textContent = airconState.temp + '°C';
            
            // 设置默认模式为制冷
            document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('btn-primary'));
            document.getElementById('coolBtn').classList.add('btn-primary');
            
            openModal('airconModal');
        }

        function setAirconPower(power) {
            airconState.power = power;
            const powerText = power === 'on' ? '打开空调' : '关闭空调';
            alert(`命令已经发出：${powerText}`);
        }

        function changeTemp(delta) {
            airconState.temp = Math.max(16, Math.min(30, airconState.temp + delta));
            document.getElementById('tempDisplay').textContent = airconState.temp + '°C';
        }

        function setTempMode(mode) {
            airconState.mode = mode;
            document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('btn-primary'));
            document.getElementById(mode + 'Btn').classList.add('btn-primary');
        }

        function confirmAircon() {
            alert(`红外遥控器控制面板已保存：${airconState.power === 'on' ? '打开' : '关闭'}，温度：${airconState.temp}°C，模式：${airconState.mode === 'cool' ? '制冷' : '制热'}`);
            closeModal('airconModal');
        }

        // 亮度类控制
        let brightnessDragInitialized = false;
        let brightnessIsDragging = false;
        let brightnessLastCommandValue = 50;
        
        function openBrightnessModal() {
            openModal('brightnessModal');
            if(!brightnessDragInitialized){
                initBrightnessDrag();
                brightnessDragInitialized = true;
            }
            brightnessLastCommandValue = brightnessValue; // 重置记录值
        }

        function initBrightnessDrag() {
            const container = document.getElementById('brightnessContainer');
            const handle = document.getElementById('brightnessHandle');
            if(!container || !handle) return;
            
            function updateBrightness(clientX) {
                const rect = container.getBoundingClientRect();
                const x = clientX - rect.left;
                const percentage = Math.round((x / rect.width) * 100);
                const clampedPercentage = Math.max(0, Math.min(100, percentage));
                
                brightnessValue = clampedPercentage;
                document.getElementById('brightnessBar').style.width = clampedPercentage + '%';
                handle.style.left = clampedPercentage + '%';
                document.getElementById('brightnessValue').textContent = clampedPercentage + '%';
            }
            
            function onStart(e) {
                brightnessIsDragging = true;
                e.preventDefault();
                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                updateBrightness(clientX);
            }
            
            function onMove(e) {
                if(!brightnessIsDragging) return;
                e.preventDefault();
                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                updateBrightness(clientX);
            }
            
            function onEnd(e) {
                if(!brightnessIsDragging) return;
                brightnessIsDragging = false;
                // 拖动停止时，如果值发生变化，提示下发命令
                if(brightnessValue !== brightnessLastCommandValue){
                    alert(`命令已经发出：亮度 ${brightnessValue}%`);
                    brightnessLastCommandValue = brightnessValue;
                }
            }
            
            // 点击容器
            container.addEventListener('click', function(e) {
                if(e.target === handle) return; // 点击手柄时不触发
                const rect = container.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const percentage = Math.round((x / rect.width) * 100);
                const clampedPercentage = Math.max(0, Math.min(100, percentage));
                brightnessValue = clampedPercentage;
                document.getElementById('brightnessBar').style.width = clampedPercentage + '%';
                handle.style.left = clampedPercentage + '%';
                document.getElementById('brightnessValue').textContent = clampedPercentage + '%';
                alert(`命令已经发出：亮度 ${brightnessValue}%`);
                brightnessLastCommandValue = brightnessValue;
            });
            
            // 鼠标拖动
            handle.addEventListener('mousedown', onStart);
            document.addEventListener('mousemove', onMove);
            document.addEventListener('mouseup', onEnd);
            
            // 触摸拖动
            handle.addEventListener('touchstart', onStart, {passive:false});
            document.addEventListener('touchmove', onMove, {passive:false});
            document.addEventListener('touchend', onEnd);
        }

        // 开度类控制
        let openingDragInitialized = false;
        let openingIsDragging = false;
        let openingLastCommandValue = 0;
        
        function openOpeningModal() {
            openModal('openingModal');
            if(!openingDragInitialized){
                initOpeningDrag();
                openingDragInitialized = true;
            }
            openingLastCommandValue = openingValue; // 重置记录值
        }

        function initOpeningDrag() {
            const container = document.getElementById('openingContainer');
            const handle = document.getElementById('openingHandle');
            if(!container || !handle) return;
            
            function updateOpening(clientX) {
                const rect = container.getBoundingClientRect();
                const x = clientX - rect.left;
                const percentage = Math.round((x / rect.width) * 100);
                const clampedPercentage = Math.max(0, Math.min(100, percentage));
                
                openingValue = clampedPercentage;
                document.getElementById('openingBar').style.width = clampedPercentage + '%';
                handle.style.left = clampedPercentage + '%';
                document.getElementById('openingValue').textContent = clampedPercentage + '%';
            }
            
            function onStart(e) {
                openingIsDragging = true;
                e.preventDefault();
                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                updateOpening(clientX);
            }
            
            function onMove(e) {
                if(!openingIsDragging) return;
                e.preventDefault();
                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                updateOpening(clientX);
            }
            
            function onEnd(e) {
                if(!openingIsDragging) return;
                openingIsDragging = false;
                // 拖动停止时，如果值发生变化，提示下发命令
                if(openingValue !== openingLastCommandValue){
                    alert(`命令已经发出：开度 ${openingValue}%`);
                    openingLastCommandValue = openingValue;
                }
            }
            
            // 点击容器
            container.addEventListener('click', function(e) {
                if(e.target === handle) return; // 点击手柄时不触发
                const rect = container.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const percentage = Math.round((x / rect.width) * 100);
                const clampedPercentage = Math.max(0, Math.min(100, percentage));
                openingValue = clampedPercentage;
                document.getElementById('openingBar').style.width = clampedPercentage + '%';
                handle.style.left = clampedPercentage + '%';
                document.getElementById('openingValue').textContent = clampedPercentage + '%';
                alert(`命令已经发出：开度 ${openingValue}%`);
                openingLastCommandValue = openingValue;
            });
            
            // 鼠标拖动
            handle.addEventListener('mousedown', onStart);
            document.addEventListener('mousemove', onMove);
            document.addEventListener('mouseup', onEnd);
            
            // 触摸拖动
            handle.addEventListener('touchstart', onStart, {passive:false});
            document.addEventListener('touchmove', onMove, {passive:false});
            document.addEventListener('touchend', onEnd);
        }

        // 点击遮罩关闭弹框
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('modal-mask')) {
                e.target.classList.remove('open');
            }
        });
    </script>
</body>
</html>
